<template>
  <div class="box">
    <div class="header">
      <van-nav-bar title="我的订单" left-arrow @click-left="$router.back()" />
    </div>
    <div class="meddle">
      <van-tabs v-model:active="active">
        <van-tab title="待付款">
          <ul >
                <li v-for="item in list" :key="item.id">
                    <img :src="item.image" alt="" style="width: 100%;" @click="$router.push('/detail/'+item.id)">
                    <p>{{ item.title }}</p>
                    <p style="color: red;">￥{{ item.price }}</p>
                </li>
            </ul>
        </van-tab>
        <van-tab title="已支付">
          <ul >
                <li v-for="item in list" :key="item.id">
                    <img :src="item.image" alt="" style="width: 100%;" @click="$router.push('/detail/'+item.id)">
                    <p>{{ item.title }}</p>
                    <p style="color: red;">￥{{ item.price }}</p>
                </li>
            </ul>
        </van-tab>
        <van-tab title="已发货">
          <ul >
                <li v-for="item in list" :key="item.id">
                    <img :src="item.image" alt="" style="width: 100%;" @click="$router.push('/detail/'+item.id)">
                    <p>{{ item.title }}</p>
                    <p style="color: red;">￥{{ item.price }}</p>
                </li>
            </ul>
        </van-tab>
        <van-tab title="待收货">
          <ul >
                <li v-for="item in list" :key="item.id">
                    <img :src="item.image" alt="" style="width: 100%;" @click="$router.push('/detail/'+item.id)">
                    <p>{{ item.title }}</p>
                    <p style="color: red;">￥{{ item.price }}</p>
                </li>
            </ul>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script setup>
    import request from '@/utils/request.js'
    import { ref,onMounted } from "vue";
    const  list=ref([])
    onMounted(()=>{
        request.get('/list',{
            params:{
                pagination:1, pageNum:3
            }
        }).then(res=>{
            if(res.data.code==200){
                list.value=res.data.data
            }
          
        })
    })
</script>